<template>
  <div :id="id"  style="width: 100%;height:200px"></div>
</template>

<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/grid');
require('echarts/lib/chart/line');
export default {
    props: ['id','title'],
    data(){
      return{
        dataX:[],
        dataY:[],
      }
    },
    mounted() {
      this.drawPie()
    },
    methods:{
      setDate(data){
        let list=data;
        if(list.length>0){
          for (let i=0;i<list.length;i++){
            this.dataX.push(list[i].ds)
            this.dataY.push(list[i].total)
          }
        }
        this.drawPie()
      },
      drawPie(){
        let chartDom = document.getElementById(this.id);
        let myChart = echarts.init(chartDom);
        let option = {
          title: {
            text: this.title,
          },
          xAxis: {
            type: 'category',
            data: this.dataX
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.dataY,
              type: 'line',
              itemStyle : { normal: {label : {show: true}}}
            }
          ]
        };
        myChart.setOption(option)
      }
    }
}
</script>

<style scoped>

</style>